{% extends 'base.html' %}
{% load custom_tag %}
{% load static %}
{% block title %}{{ article.title }} | {% endblock %}

{% block banner %}
<div class="bg-cover pd-header post-cover">
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        {{ article.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/tocbot.css' %}">
<link rel="stylesheet" href="{% static 'css/prism-a11y-dark.css' %}">
<link rel="stylesheet" href="{% static 'css/monokai.css' %}">
{% endblock %}

{% block custom_style %}
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
{% endblock %}

{% block contents %}
<main class="post-container content">
    <style>
        #articleContent h1::before,
        #articleContent h2::before,
        #articleContent h3::before,
        #articleContent h4::before,
        #articleContent h5::before,
        #articleContent h6::before {
            display: block;
            content: " ";
            height: 100px;
            margin-top: -100px;
            visibility: hidden;
        }

        #articleContent :focus {
            outline: none;
        }

        .toc-fixed {
            position: fixed;
            top: 64px;
        }

        .toc-widget {
            padding-left: 20px;
        }

        .toc-widget .toc-title {
            margin: 35px 0 15px 0;
            padding-left: 17px;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 1.5rem;
        }

        .toc-widget ol {
            padding: 0;
            list-style: none;
        }

        #toc-content ol {
            padding-left: 10px;
        }

        #toc-content ol li {
            padding-left: 10px;
        }

        #toc-content .toc-link:hover {
            color: #42b983;
            font-weight: 700;
            text-decoration: underline;
        }

        #toc-content .toc-link::before {
            background-color: transparent;
            max-height: 25px;
        }

        #toc-content .is-active-link {
            color: #42b983;
        }

        #toc-content .is-active-link::before {
            background-color: #42b983;
        }

        #floating-toc-btn {
            position: fixed;
            right: 15px;
            bottom: 76px;
            padding-top: 15px;
            margin-bottom: 0;
            z-index: 998;
        }

        #floating-toc-btn .btn-floating {
            width: 48px;
            height: 48px;
        }

        #floating-toc-btn .btn-floating i {
            line-height: 48px;
            font-size: 1.4rem;
        }
    </style>
    <div class="row">
        <div id="main-content" class="col s12 m12 l9">
            <!-- 文章内容详情 -->
            <div id="artDetail">
                <div class="card">
                    <div class="card-content article-info">
                        <div class="row tag-cate">
                            <div class="col s7">
                                <div class="article-tag">
                                    {% for tag in  article.tag.all %}
                                    <a href="{% url 'article_tag' tag.id %}">
                                        <span class="chip tag-color">{{ tag }}</span>
                                    </a>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col s5 right-align">
                                <div class="post-cate">
                                    <i class="fas fa-bookmark fa-fw icon-category"></i>
                                        <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                            {{ article.category }}
                                        </a>
                                </div>
                            </div>
                        </div>
                        <div class="post-info">
                            <div class="post-date info-break-policy">
                                <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                                {{ article.add_time | date:'Y-m-d'}}
                            </div>
                            <div class="post-date info-break-policy">
                                <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                                {{ article.update_time | date:'Y-m-d' }}
                            </div>
                            <div class="info-break-policy">
                                <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                                {{ article.click_count }}
                            </div>
                        </div>
                    </div>
                    <hr class="clearfix">
                    <div class="card-content article-card-content">
                        <div id="articleContent">
                            {{ detail_html | custom_markdown| safe}}
                        </div>
                        <hr/>
                        <div class="reprint" id="reprint-statement">
                            <div class="reprint__author">
                                <span class="reprint-meta" style="font-weight: bold;">
                                    <i class="fas fa-user">
                                        文章作者:
                                    </i>
                                </span>
                                <span class="reprint-info">
                                    <a href="https://www.sqlsec.com" rel="external nofollow noreferrer">国光</a>
                                </span>
                            </div>
                            <div class="reprint__type">
                                <span class="reprint-meta" style="font-weight: bold;">
                                    <i class="fas fa-link">
                                        文章链接:
                                    </i>
                                </span>
                                <span class="reprint-info">
                                    <a href="https://www.sqlsec.com/2019/11/kode.html">https://www.sqlsec.com/2019/11/kode.html</a>
                                </span>
                            </div>
                            <div class="reprint__notice">
                                    <span class="reprint-meta" style="font-weight: bold;">
                                        <i class="fas fa-copyright">
                                            版权声明:
                                        </i>
                                    </span>
                                    <span class="reprint-info">
                                        本博客所有文章除特別声明外，均采用
                                        <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                                        许可协议。转载请注明来源
                                        <a href="https://www.sqlsec.com" target="_blank">国光</a>
                                        !
                                    </span>
                                </div>
                        </div>
                        <script async defer>
                          document.addEventListener("copy", function (e) {
                            let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
                            M.toast({html: toastHTML})
                          });

                          function navToReprintStatement() {
                            $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
                          }
                        </script>
                        <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">

                        <div class="article-tag">

                                <a href="/tags/macOS/">
                                    <span class="chip tag-color">macOS</span>
                                </a>

                                <a href="/tags/%E6%8A%80%E5%B7%A7/">
                                    <span class="chip tag-color">技巧</span>
                                </a>

                        </div>

                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">


    <div class="social-share" data-sites="qq,wechat,weibo" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>




</div>

                </div>
            </div>
                    </div>
                </div>
                <article id="prenext-posts" class="prev-next articles">
        <div class="row article-row">

            <div class="article col s12 m6" data-aos="fade-up">
                <div class="article-badge left-badge text-color">
                    <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
                <div class="card">
                    <a href="/2019/11/macbp.html">
                        <div class="card-image">

                            <img src="https://dn-coding-net-tweet.codehub.cn/photo/2019/e425cf29-328c-452a-9d14-87d0d369ae46.jpg" class="responsive-img" alt="macOS下如何优雅的使用Burp Suite">

                            <span class="card-title">macOS下如何优雅的使用Burp Suite</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">

                                  众所周知国内我们使用的Burp Suite大多数是大佬们分享出来的专业破解版的Burp Suite，每次启动的时候都得通过加载器来启动Burp Suite，那有没有更加优雅的方式呢？下面就开始水这一篇文章了，告诉大家如何配置基本的渗透测

                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-06
                            </span>
                            <span class="publish-author">

                                <i class="fas fa-bookmark fa-fw icon-category"></i>

                                <a href="/ggs/Others/" class="post-category">
                                        Others
                                    </a>


                            </span>
                        </div>
                    </div>

                    <div class="card-action article-tags">

                        <a href="/tags/macOS/">
                            <span class="chip tag-color">macOS</span>
                        </a>

                        <a href="/tags/%E6%8A%80%E5%B7%A7/">
                            <span class="chip tag-color">技巧</span>
                        </a>

                    </div>

                </div>
            </div>


            <div class="article col s12 m6" data-aos="fade-up">
                <div class="article-badge right-badge text-color">
                    下一篇&nbsp;<i class="fas fa-chevron-right"></i>
                </div>
                <div class="card">
                    <a href="/2019/11/sqlmap.html">
                        <div class="card-image">

                            <img src="https://dn-coding-net-tweet.codehub.cn/photo/2019/fc933feb-7fe9-4fc0-8693-fb32d67d6753.jpg" class="responsive-img" alt="Sqlmap盲注日志分析溯源">

                            <span class="card-title">Sqlmap盲注日志分析溯源</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">


    Sqlmap是一个Web安全从业者必备的自动化注入工具，我们经常使用sqlmap来进行自动化注入，那有没有尝试过通过sqlmap的注入日志来溯源判断真实有效的注入语句呢？


    环境搭建本次测试在Windows上使用PhpStudy来搭

                        </div>
                        <div class="publish-info">
                                <span class="publish-date">
                                    <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                                </span>
                            <span class="publish-author">

                                <i class="fas fa-bookmark fa-fw icon-category"></i>

                                <a href="/ggs/Web/" class="post-category">
                                        Web
                                    </a>


                            </span>
                        </div>
                    </div>

                    <div class="card-action article-tags">

                        <a href="/tags/%E7%A5%9E%E5%99%A8/">
                            <span class="chip tag-color">神器</span>
                        </a>

                        <a href="/tags/%E6%97%A5%E5%BF%97%E5%88%86%E6%9E%90/">
                            <span class="chip tag-color">日志分析</span>
                        </a>

                        <a href="/tags/%E6%BA%AF%E6%BA%90/">
                            <span class="chip tag-color">溯源</span>
                        </a>

                    </div>

                </div>
            </div>

        </div>
    </article>
            </div>
            <script>
                $('#articleContent').on('copy', function (e) {
                    // IE8 or earlier browser is 'undefined'
                    if (typeof window.getSelection === 'undefined') return;

                    var selection = window.getSelection();
                    // if the selection is short let's not annoy our users.
                    if (('' + selection).length < Number.parseInt('240')) {
                        return;
                    }

                    // create a div outside of the visible area and fill it with the selected text.
                    var bodyElement = document.getElementsByTagName('body')[0];
                    var newdiv = document.createElement('div');
                    newdiv.style.position = 'absolute';
                    newdiv.style.left = '-99999px';
                    bodyElement.appendChild(newdiv);
                    newdiv.appendChild(selection.getRangeAt(0).cloneContents());

                    // we need a <pre> tag workaround.
                    // otherwise the text inside "pre" loses all the line breaks!
                    if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
                        newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
                    }

                    var url = document.location.href;
                    newdiv.innerHTML += '<br />'
                        + '来源: 国光<br />'
                        + '文章作者: 国光<br />'
                        + '文章链接: <a href="' + url + '">' + url + '</a><br />'
                        + '咳咳又想白嫖文章？本文章著作权归作者所有，任何形式的转载都请注明出处。';

                    selection.selectAllChildren(newdiv);
                    window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
                });
            </script>
            <!-- 代码块功能依赖 -->
            <script type="text/javascript" src="{% static 'codeBlock/codeBlockFuction.js' %}"></script>
            <!-- 代码语言 -->
            <script type="text/javascript" src="{% static 'codeBlock/codeLang.js' %}"></script>
            <!-- 代码块复制 -->
            <script type="text/javascript" src="{% static 'codeBlock/codeCopy.js' %}"></script>
            <!-- 代码块收缩 -->
            <script type="text/javascript" src="{% static 'codeBlock/codeShrink.js' %}"></script>
            <!-- 代码块折行 -->
        </div>
        <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
            <div class="toc-widget">
                <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
                <div id="toc-content"></div>
            </div>
        </div>
    </div>

    <!-- TOC 悬浮按钮. -->
    <div id="floating-toc-btn" class="hide-on-med-and-down">
        <a class="btn-floating btn-large tag-color">
            <i class="fas fa-list-ul"></i>
        </a>
    </div>
    <script src="{% static 'js/tocbot.min.js' %}"></script>
    <script>
        $(function () {
            tocbot.init({
                tocSelector: '#toc-content',
                contentSelector: '#articleContent',
                headingsOffset: -($(window).height() * 0.4 - 45),
                // headingsOffset: -205,
                headingSelector: 'h1, h2, h3, h4, h5'
            });

            // modify the toc link href to support Chinese.
            let i = 0;
            let tocHeading = 'toc-heading-';
            $('#toc-content a').each(function () {
                $(this).attr('href', '#' + tocHeading + (++i));
            });

            // modify the heading title id to support Chinese.
            i = 0;
            $('#articleContent').children('h1, h2, h3, h4, h5').each(function () {
                $(this).attr('id', tocHeading + (++i));
            });

            // Set scroll toc fixed.
            let tocHeight = parseInt($(window).height() * 0.4 - 64);
            let $tocWidget = $('.toc-widget');
            $(window).scroll(function () {
                let scroll = $(window).scrollTop();
                /* add post toc fixed. */
                if (scroll > tocHeight) {
                    $tocWidget.addClass('toc-fixed');
                } else {
                    $tocWidget.removeClass('toc-fixed');
                }
            });


            /* 修复文章卡片 div 的宽度. */
            let fixPostCardWidth = function (srcId, targetId) {
                let srcDiv = $('#' + srcId);
                if (srcDiv.length === 0) {
                    return;
                }

                let w = srcDiv.width();
                if (w >= 450) {
                    w = w + 21;
                } else if (w >= 350 && w < 450) {
                    w = w + 18;
                } else if (w >= 300 && w < 350) {
                    w = w + 16;
                } else {
                    w = w + 14;
                }
                $('#' + targetId).width(w);
            };

            // 切换TOC目录展开收缩的相关操作.
            const expandedClass = 'expanded';
            let $tocAside = $('#toc-aside');
            let $mainContent = $('#main-content');
            $('#floating-toc-btn .btn-floating').click(function () {
                if ($tocAside.hasClass(expandedClass)) {
                    $tocAside.removeClass(expandedClass).hide();
                    $mainContent.removeClass('l9');
                } else {
                    $tocAside.addClass(expandedClass).show();
                    $mainContent.addClass('l9');
                }
                fixPostCardWidth('artDetail', 'prenext-posts');
            });

        });
    </script>
</main>
{% endblock %}